import React, { useState } from 'react';
import { Layout, Menu,Image } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { FormOutlined,BookOutlined } from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

const menuItems = [
  { key: 'home', label: '学习心得', path: '/',icon:<FormOutlined />,title:'学习心得' },
  { key: 'question-bank', label: '题库管理', path: '/question-bank',icon:<BookOutlined />,title:'题库管理' },
];

const AppLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);//侧边栏是否折叠
  const navigate = useNavigate();//导航
  const location = useLocation();//当前路径

  return (
    <Layout style={{ minHeight: '100vh' ,backgroundColor: '#fff'}}>
      <Header style={{paddingLeft:20, backgroundColor:'#001629', display: 'flex',alignItems: 'center', height:48}}>
        <Image 
        preview={false}
        src='../../react.svg'
        />
        <div style={{color: '#fff',marginLeft:20,fontSize: 16,}}>中南民族大学 翟玉兰 大作业</div>
      </Header>
      <Layout >
        <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} width={160}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[location.pathname === '/' ? 'home' : (location.pathname.startsWith('/question-bank') ? 'question-bank' : location.pathname.replace('/', ''))]}
            onClick={({ key }) => {
              const item = menuItems.find(i => i.key === key);
              if (item) navigate(item.path);
            }}
            items={menuItems}
            style={{ height: '100%', borderRight: 0 ,fontSize:13}}
          />
        </Sider>
        <Layout style={{ paddingTop: '20px', paddingLeft: '16px', paddingRight: '5px',background:'#fff' }}>
          <Content>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AppLayout;